<!-- 我的积分 -->
<template>
	<view>

		<uv-sticky :customNavHeight="navh">
			<view class="tn-gradient-bg__cool-2">
				<view class="flex-x tn-p">

					<view class="flex-y flex-center">
						<uv-count-to :endVal="userinfo.extra.integral_total" color="#fff" font-size="45rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">累计</view>
					</view>

					<view class="flex-y flex-center">
						<uv-count-to :endVal="userinfo.extra.integral_used" color="#fff" font-size="45rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">已使用</view>
					</view>

					<view class="flex-y flex-center">
						<uv-count-to :endVal="userinfo.extra.integral_lock" color="#fff" font-size="45rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">未生效</view>
					</view>

					<view class="flex-y flex-center">
						<uv-count-to :endVal="userinfo.extra.integral_usable" color="#fff" font-size="45rpx" />
						<view class="tn-text-xs tn-lime-light_text tn-mt-xs">可用</view>
					</view>

				</view>
			</view>
		</uv-sticky>

		<view class="tn-p">

			<template v-for="(item, index) in list" :key="index">
				<view class="ta-card">
					<view class="ta-card-head">
						<view>{{ item.code }}</view>
						<text v-if="Number(item.amount) > 0">
							收入 <text class="tn-text-bold">{{ Math.abs(Number(item.amount)) }}</text> 积分
						</text>
						<text class="tn-red_text" v-else>
							支出 <text class="tn-text-bold">{{ Math.abs(Number(item.amount)) }}</text> 积分
						</text>
					</view>
					<view class="ta-card-body">
						<view>{{ item.name }}</view>
						<view class="ta-desc-text">{{ item.remark }}</view>
					</view>
					<view class="ta-card-foot flex-x flex-x-between">
						<view class="ta-desc-text">{{ item.create_time }}</view>
						<text class="tn-text-bold tn-red_text" v-if="item.cancel">已取消</text>
						<text class="tn-text-bold tn-blue_text" v-else-if="item.unlock">已生效</text>
						<text class="tn-text-bold tn-red_text" v-else>锁定中</text>
					</view>
				</view>
			</template>

			<view v-if="list.length < 1" style="padding:300rpx 0">
				<uv-empty mode="list" text="~暂无数据~" icon="/static/imgs/empty/car.png" />
				<view class="tn-mt-xl flex-center">
					<uv-button @click="goto.back()" shape="circle" text="上一页" />
				</view>
			</view>

			<view v-else class="tn-mt">
				<uv-load-more :status="more" @loadmore="loadData" />
			</view>

		</view>
	</view>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { TaDataUser, TaUseAccount } from '@/utils';

export default defineComponent({
	setup() {
		return TaUseAccount()
	},
	data() {
		return {
			navh: <number>0,
			page: <number>0,
			more: <any>'loadmore',
			list: <any[]>[]
		}
	},
	onShow() {
		this.loadData();
	},
	onReachBottom() {
		if (this.more === 'loadmore') {
			this.loadData()
		}
	},
	onPullDownRefresh() {
		this.loadData(true);
		setTimeout(() => uni.stopPullDownRefresh(), 1000)
	},
	methods: {
		// 加载地址
		loadData(force: boolean = false) {
			if (force) {
				this.list = <any[]>[]
				this.page = <number>0
			}
			this.more = 'loading'
			TaDataUser.my.integrals({ page: ++this.page }).then((ret: any) => {
				if (ret.data.list.length > 0) {
					this.more = 'loadmore'
					this.page = ret.data.page.current || 0
					this.list = this.list.concat(ret.data.list)
				}
				if (ret.data.page.total <= this.list.length) {
					this.more = 'nomore'
				} else if (this.list.length <= 0) {
					this.more = 'empty'
				}
			})
		}
	}
})
</script>